<template>
    <elestatement  
       v-loading="loading"
       :element-loading-text="loadingText"
       element-loading-spinner="el-icon-warning-outline"
       element-loading-background="rgba(0, 0, 0, 0.5)"
        :pop='pop' >
        <slot slot="close"></slot>
       
        <div class="ranking realblock"  slot="content">
            <div class="eleblock realRank">
            <dealSell   :item_list="item_list"></dealSell>
            </div>
        </div>
    </elestatement>
</template>
<style lang="scss">
.zujiandiv{
  .ranking{
      width: 100%; 
      height: 85%;
      overflow: hidden;
      .realRank{
        width:100%;
        height: 100%;
      }
  }
}

</style>
<script>
let moment = require("moment"); 
import elestatement from "@/components/real-time/real-time-module/common/size/Element2x2";
import dealSell from "@/components/analyzeRealTime/dealSell";//轮播滚动
export default {
  components: {
      elestatement,
      dealSell
  },
  props:{
    GetData:{},
    isdemo:{
      type:Boolean,
      default:function(){
        return false
      }
    }
  },
  data(){
    return {
      item_list: [],
      pop: {
        title: "成交率列表",							//报表标题
        helphint: [
          {title: "成交率", text: ""},				//第一条信息为提示标题 不给text
          {title: "成交率", text: "：(成交量 / 进入客流)*100"},
        ]
      },
      realData: {
        company_ids: '',//企业id
        case_ids: '',//案场id
        idsType: 0,//企业或案场标记：0：为只选择了企业id，1：为选择了案场id
        start_day: moment(new Date()).format("YYYY-MM-DD"),
        end_day: moment(new Date()).format("YYYY-MM-DD"),
      },
      loading:false,
      loadingText:'加载中...',
      start_hm:'00:00',
      end_hm:'23:59',
      global:null,
      xykpis:['enters','guest_avg_price','actual_sales','receipt','sold_rate'],
      shake:false
    }
  },
  created() {
    if(this.isdemo)
    {
        this.item_list=[{
          case_info_name: "云视北京店",
          pieces_avg_price:'888',
          enters: 88888,
          actual_sales:888888,
          receipt:888,
          sold_rate:'88.88%'
        }];
        this.$nextTick(()=>{
          this.item_list=[
            {
              case_info_name: "云视北京店",
              pieces_avg_price:'888',
              enters: 88888,
              actual_sales:888888,
              receipt:888,
              sold_rate:'88.88%'
            },
            {
              case_info_name: "云视上海店",
              pieces_avg_price:'888',
              enters: 78888,
              actual_sales:888888,
              receipt:888,
              sold_rate:'88.88%'
            },
            {
              case_info_name: "云视广州店",
              pieces_avg_price:'888',
              enters: 68888,
              actual_sales:888888,
              receipt:888,
              sold_rate:'88.88%'
            },
            {
              case_info_name: "云视深圳店",
              pieces_avg_price:'888',
              enters: 58888,
              actual_sales:888888,
              receipt:888,
              sold_rate:'88.88%'
            },
            {
              case_info_name: "云视安徽店",
              pieces_avg_price:'888',
              enters: 48888,
              actual_sales:888888,
              receipt:888,
              sold_rate:'88.88%'
            },
            {
              case_info_name: "云视杭州店",
              pieces_avg_price:'888',
              enters: 46666,
              actual_sales:888888,
              receipt:888,
              sold_rate:'88.88%'
            },
            {
              case_info_name: "云视香港店",
              pieces_avg_price:'888',
              enters: 38888,
              actual_sales:888888,
              receipt:888,
              sold_rate:'88.88%'
            },
            {
              case_info_name: "云视云南店",
              pieces_avg_price:'888',
              enters: 28888,
              actual_sales:888888,
              receipt:888,
              sold_rate:'88.88%'
            }
          ];
        })
      
      this.loading=false;
    }
  },
  mounted() {
   
  },
  beforeDestroy(){
  },
  methods: {
    getData() {
      let tags=0;
      if(this.global.type=='chain')
      {
        tags=2;
      }
      else if(this.global.type=='mall')
      {
        tags=1;
      }
      let url = '/sys/report_new/distribution_sum?group_type=case&tags='+ tags+
        '&indicator_keys=' + this.xykpis +'&sort_key=sold_rate&sort_type=desc'+
        "&start_day=" + this.realData.start_day + "&end_day=" + this.realData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
      let prarms = {
        org_id_list: this.realData.company_ids.split(','),
        org_type:1,
      }
      this.$api.post(url, prarms)
      .then(data => {
        if(data == '10001'){
          this.item_list=[];
          this.loadingText = '无该指标权限';
          this.shake = false
          return
        }
        if(data && data.data.item_list&&data.data.item_list.length){
          let _data = data.data;
          _data.item_list.sort((x, y) => {
            if (x.sold_rate < y.sold_rate) {
              return 1;
            }
            if (x.sold_rate > y.sold_rate) {
              return -1
            }
            return 0
          });
          this.item_list = _data.item_list.map(x => {
            if (x.sold_rate) {
              x.sold_rate = x.sold_rate + '%'
            }
            return x
          });
          this.$nextTick(()=>{
            this.loading = false;
          })
        }
        else{
          this.item_list=[];
          this.$nextTick(()=>{
            this.loadingText = '无数据';
          })
        }
        this.shake = false
      })
      .catch(err=>{
        this.item_list=[];
        this.shake = false
        this.$nextTick(()=>{
          this.loadingText = '无数据';
        })
         console.log(err);
      })
    },
      

  },
  watch: {
    GetData:{
      handler(val){
        if(this.shake && val.index != 0){
          return
        }
        if(val){
          this.realData = val.realHeaderData;
          this.global = val.global;
          this.loading = true;
          this.shake = true
          if(!this.realData.company_ids.length){
            this.item_list=[];
            this.loadingText = '无数据';
            this.shake = false
            return
          }else{
            this.loadingText = '加载中...';
            this.getData();
          }
        }
      },
      deep:true

    }
  }
};
</script>
